<template>
  <div class="teacher-leave-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>学生请假申请管理</span>
          <el-button type="primary" size="small" @click="fetchLeaveApplications" style="margin-left: auto;">刷新</el-button>
        </div>
      </template>
      
      <el-table :data="leaveApplications" style="width: 100%">
        <el-table-column prop="studentId" label="学号" width="120" />
        <el-table-column prop="studentName" label="姓名" width="120" />
        <el-table-column prop="application.leaveType" label="请假类型" width="100" />
        <el-table-column label="请假时间" width="220">
          <template #default="scope">
            {{ formatDate(scope.row.application.startDate) }} ~ {{ formatDate(scope.row.application.endDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="affectedCourseNames" label="涉及课程" width="200">
          <template #default="scope">
            <el-tooltip :content="scope.row.affectedCourseNames" placement="top" :show-after="500">
              <span>{{ scope.row.affectedCourseNames }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-if="leaveApplications.length > 0"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalApplications"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

export default {
  name: 'TeacherLeaveManagement',
  props: {
    teacherId: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const leaveApplications = ref([])
    const currentPage = ref(1)
    const pageSize = ref(10)
    const totalApplications = ref(0)

    // 获取教师相关的请假申请（只显示已审批通过的）
    const fetchLeaveApplications = async () => {
      try {
        const response = await axios.get(`/api/teacher/leave-applications?teacherId=${props.teacherId}`)
        leaveApplications.value = response.data
        totalApplications.value = response.data.length
      } catch (error) {
        console.error('获取请假申请失败:', error)
        ElMessage.error('获取请假申请失败')
      }
    }

    const handleSizeChange = (val) => {
      pageSize.value = val
      currentPage.value = 1
    }
    
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    const formatDate = (dateStr) => {
      if (!dateStr) return '';
      const d = new Date(dateStr);
      return `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}`;
    }

    onMounted(() => {
      fetchLeaveApplications()
    })

    return {
      leaveApplications,
      currentPage,
      pageSize,
      totalApplications,
      fetchLeaveApplications,
      handleSizeChange,
      handleCurrentChange,
      formatDate
    }
  }
}
</script>

<style scoped>
.teacher-leave-management {
  margin: 20px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style> 